<style>
    .barCodeImgBox {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
    }
    
    .barCodeTitle {
        font-size: 26px;
        margin: 20px 0;
    }
    
    .barCodeImg {
        width: 80%;
        height: auto;
        display: block;
    }
</style>

<div id="interviewGroup">
    <el-dialog title="面试群密钥" :visible.sync="dialogFormVisible" width="300px" :close-on-click-modal="false" :close-on-press-escape="false" @closed="handleClosed">

        <el-input v-model="secretKey" autocomplete="off" show-password @keyup.enter.native="handleConfirm"></el-input>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
    </el-dialog>

    <div class="barCodeImgBox" v-if="showBarCodeImg">
        <!-- <div class="barCodeTitle">{{item.title}}</div>
        <img :src="fileHttpPath[index]" alt="网络路径有误" class="barCodeImg" /> -->
        <div class="barCodeImgBox"> {{barCodeInfo.title}}</div>
        <img class="barCodeImg" :src="fileHttpPath[0]" alt="无法显示图片">
    </div>

</div>

<script>
    new Vue({
        el: "#interviewGroup",
        data() {
            return {
                barCodeInfo: {},
                fileHttpPath: [],
                dialogFormVisible: true,
                secretKey: "",
                formLabelWidth: '120px',
                confirmLock: false,
                timeRemaining: null,
                showBarCodeImg: false,
            }
        },
        methods: {
            // 获取图片上传后的https的url路径地址  参数是上传图片的 fileId
            fileID2https(fileIds) {
                let that = this;
                //初始化
                let first = function(callback) {
                    var c1 = new cloud.Cloud({
                        //必填，表示是未登录模式
                        identityless: true,
                        //资源方 AppID
                        resourceAppid: "wx96f760966921f98a",
                        //资源方环境 ID
                        resourceEnv: "cloud1-8g54d6xb74e96e7d",
                    });
                    c1.init();
                    //回调
                    callback(c1);
                };
                //完成初始化后再回调，即可访问云数据库
                let callback = function(c1) {
                    // console.log(fileIds);
                    c1.getTempFileURL({
                        fileList: fileIds,
                        success: (res) => {
                            // console.log("获取Files信息：", res.fileList);
                            let tmpFileUrls = [];
                            for (let i = 0; i < res.fileList.length; i++) {
                                tmpFileUrls.push(res.fileList[i].tempFileURL);
                            }
                            that.fileHttpPath = tmpFileUrls;
                            console.log(that.fileHttpPath);
                            if (that.fileHttpPath.length != 0) {
                                that.loading = false;
                            }
                        },
                        fail: console.error,
                    });
                };
                first(callback);
            },

            handleClosed() {
                console.log("closed");
            },

            handleConfirm() {
                let that = this;
                // console.log('confirm');
                // console.log(that.secretKey);
                if (!that.secretKey) {
                    that.$notify({
                        title: '警告',
                        message: '密钥不允许为空',
                        type: 'warning'
                    });
                    return;
                }


                if (that.confirmLock) {
                    that.$notify({
                        title: '警告[节流]',
                        type: "warning",
                        message: "请" + that.timeRemaining + "秒后重试"
                    })
                    return;
                }

                console.log(that.secretKey);
                //初始化
                let first = function(callback) {
                    var c1 = new cloud.Cloud({
                        //必填，表示是未登录模式
                        identityless: true,
                        //资源方 AppID
                        resourceAppid: "wx96f760966921f98a",
                        //资源方环境 ID
                        resourceEnv: "cloud1-8g54d6xb74e96e7d",
                    });
                    c1.init();
                    //回调
                    callback(c1);
                };
                //完成初始化后再回调，即可访问云数据库
                let callback = function(c1) {
                    const db = c1.database();
                    db.collection('InterviewGroup').where({
                        secretKey: that.secretKey
                    }).get({
                        success: res => {
                            console.log(res);
                            if (res.data.length != 0) {
                                that.$notify({
                                    type: 'success',
                                    title: '成功',
                                    message: '验证成功'
                                });
                                that.barCodeInfo = res.data[0];
                                console.log(res.data[0]);
                                that.fileID2https([res.data[0].barcode]);
                                that.dialogFormVisible = false;
                                that.showBarCodeImg = true;
                            } else {
                                that.$notify.error({
                                    title: '错误',
                                    message: '密钥无效'
                                })
                            }
                            //节流
                            that.confirmLock = true; //锁起来
                            that.timeRemaining = 10;
                            let intervalID = setInterval(function() {
                                if (that.timeRemaining == 0) {
                                    clearInterval(intervalID);
                                    that.confirmLock = false;
                                    return;
                                }
                                that.timeRemaining--;
                            }, 1000)
                        },
                        fail: res => {
                            console.log(res);
                            that.$notify.error({
                                title: '错误',
                                message: '验证失败:' + res
                            });
                        },
                    })
                };
                first(callback);
            }
        },
        mounted() {

        },
    })
</script>